<!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="JavaScript高级第02天笔记1.构造函数和原型1.1对象的三种创建方式–复习 字面量方式 1var obj &#x3D; &amp;#123;&amp;#125;;  new关键字 1var obj &#x3D; new Object();  构造函数方式 12345function Person(name,age)&amp;#123;  this.name &#x3D; name;  this.age &#x3D; age;&amp;#125;var obj"><meta property="og:type" content="article"><meta property="og:title" content="JavaScript构造函数和对象"><meta property="og:url" content="https://buqingdege.gitee.io/xujianhu/javascript/JavaScript%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%92%8C%E5%AF%B9%E8%B1%A1/index.html"><meta property="og:site_name" content="Hexo"><meta property="og:description" content="JavaScript高级第02天笔记1.构造函数和原型1.1对象的三种创建方式–复习 字面量方式 1var obj &#x3D; &amp;#123;&amp;#125;;  new关键字 1var obj &#x3D; new Object();  构造函数方式 12345function Person(name,age)&amp;#123;  this.name &#x3D; name;  this.age &#x3D; age;&amp;#125;var obj"><meta property="og:locale"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="article:published_time" content="2023-10-08T15:55:45.521Z"><meta property="article:modified_time" content="2023-10-08T15:55:45.521Z"><meta property="article:author" content="buqingdege"><meta property="article:tag" content="javascript基础"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><title>JavaScript构造函数和对象</title><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="16x16"><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="32x32"><link rel="stylesheet" href="/xujianhu/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.css"><link rel="stylesheet" href="/xujianhu/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"buqingdege.gitee.io",author:"buqingdege",root:"/xujianhu/",typed_text:["buqingdege"],theme_version:"2.1.2",theme:{switch:!0,default:"style-light"},favicon:{logo:"/img/favicon.svg",icon16:"/img/favicon.svg",icon32:"/img/favicon.svg",appleTouchIcon:null,webmanifest:null,visibilitychange:!1,hidden:"/failure.ico",showText:"(/≧▽≦/)咦！又好了！",hideText:"(●—●)喔哟，崩溃啦！"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!1,plugin:{flickr_justified_gallery:"https://unpkg.com/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",user_tag:"fas fa-user-alt",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!1,title:"mac",height_limit:200},toc:{post_title:!1}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2023-10-08 23:55:45"}</script><link data-swup-theme rel="stylesheet" href="/xujianhu/css/index.css?v=2.1.2" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/xujianhu/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/xujianhu/img/favicon.svg"><div class="trm-logo-text">不情<span>的歌</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="/xujianhu/" target="">主页</a></li><li class="menu-item-has-children"><a href="/xujianhu/categories/" target="">分类</a></li><li class="menu-item-has-children"><a href="/xujianhu/archives/" target="">归档</a></li><li class="menu-item-has-children"><a data-no-swup href="/xujianhu/tag/" target="">标签</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"> <label class="trm-swich" for="trm-swich"></label> <i class="iconfont far fa-moon"></i></div></div><form class="site-search-form"><input type="text" id="local-search-input" class="st-search-input" style="margin-bottom:0"></form><div id="local-search-result" class="local-search-result-cls"></div></div><div class="trm-menu-btn"><span></span></div></div></header><link rel="stylesheet" href="css/search.css"><script src="js/jquery.js"></script><script src="js/search.js"></script><script src="js/search_custom.js"></script><div class="trm-content-start"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="/xujianhu/img/banner.png"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font">JavaScript构造函数和对象</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/xujianhu/" class="trm-anima-link">Home</a></li><li><span>javascript</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar" src="/xujianhu/images/logo/avatar.jpg"></div><h5 class="trm-name trm-mb-15">不情的歌</h5><div class="trm-label">I`m <span class="trm-typed-text"></span></div></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="https://github.com" title="github" rel="nofollow" target="_blank"><i class="iconfont fab fa-github"></i> </a><a href="https://gitee.com" title="gitee" rel="nofollow" target="_blank"><i class="iconfont iconfont cg-gitee"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">地址:</div><div class="trm-label trm-label-light">火星</div></li><li><div class="trm-label">年龄:</div><div class="trm-label trm-label-light">25</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:951649211@qq.com" class="trm-btn">联系我 <i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>10/08</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>23:55</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br>buqingdege</div></div></div><div class="trm-card"><article id="article-container" class="trm-publication"><h1 id="JavaScript高级第02天笔记"><a href="#JavaScript高级第02天笔记" class="headerlink" title="JavaScript高级第02天笔记"></a>JavaScript高级第02天笔记</h1><h2 id="1-构造函数和原型"><a href="#1-构造函数和原型" class="headerlink" title="1.构造函数和原型"></a>1.构造函数和原型</h2><h3 id="1-1对象的三种创建方式–复习"><a href="#1-1对象的三种创建方式–复习" class="headerlink" title="1.1对象的三种创建方式–复习"></a>1.1对象的三种创建方式–复习</h3><ol><li><p>字面量方式</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;&#125;;</span><br></pre></td></tr></table></figure></li><li><p>new关键字</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br></pre></td></tr></table></figure></li><li><p>构造函数方式</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name,age</span>)&#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;zs&#x27;</span>,<span class="number">12</span>);</span><br></pre></td></tr></table></figure></li></ol><h3 id="1-2静态成员和实例成员"><a href="#1-2静态成员和实例成员" class="headerlink" title="1.2静态成员和实例成员"></a>1.2静态成员和实例成员</h3><h4 id="1-2-1实例成员"><a href="#1-2-1实例成员" class="headerlink" title="1.2.1实例成员"></a>1.2.1实例成员</h4><p>实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">uname, age</span>) &#123;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">uname</span> = uname;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">sing</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会唱歌&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> ldh = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&#x27;刘德华&#x27;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(ldh.<span class="property">uname</span>);<span class="comment">//实例成员只能通过实例化的对象来访问</span></span><br></pre></td></tr></table></figure><h4 id="1-2-2静态成员"><a href="#1-2-2静态成员" class="headerlink" title="1.2.2静态成员"></a>1.2.2静态成员</h4><p>静态成员 在构造函数本身上添加的成员 如下列代码中 sex 就是静态成员,静态成员只能通过构造函数来访问</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">uname, age</span>) &#123;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">uname</span> = uname;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">sing</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会唱歌&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Star</span>.<span class="property">sex</span> = <span class="string">&#x27;男&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> ldh = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&#x27;刘德华&#x27;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Star</span>.<span class="property">sex</span>);<span class="comment">//静态成员只能通过构造函数来访问</span></span><br></pre></td></tr></table></figure><h3 id="1-3构造函数的问题"><a href="#1-3构造函数的问题" class="headerlink" title="1.3构造函数的问题"></a>1.3构造函数的问题</h3><p>构造函数方法很好用，但是存在浪费内存的问题。</p><p><img src="/xujianhu/images/img1.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="1-4构造函数原型prototype"><a href="#1-4构造函数原型prototype" class="headerlink" title="1.4构造函数原型prototype"></a>1.4构造函数原型prototype</h3><p>构造函数通过原型分配的函数是所有对象所共享的。</p><p>JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。</p><p>我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">uname, age</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">uname</span> = uname;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sing</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会唱歌&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> ldh = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&#x27;刘德华&#x27;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="keyword">var</span> zxy = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&#x27;张学友&#x27;</span>, <span class="number">19</span>);</span><br><span class="line">ldh.<span class="title function_">sing</span>();<span class="comment">//我会唱歌</span></span><br><span class="line">zxy.<span class="title function_">sing</span>();<span class="comment">//我会唱歌</span></span><br></pre></td></tr></table></figure><p><img src="/xujianhu/images/img7.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="1-5对象原型"><a href="#1-5对象原型" class="headerlink" title="1.5对象原型"></a>1.5对象原型</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。</span><br><span class="line">__proto__对象原型和原型对象 prototype 是等价的</span><br><span class="line">__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype</span><br></pre></td></tr></table></figure><p><img src="/xujianhu/images/img2.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="/xujianhu/images/img3.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="1-6constructor构造函数"><a href="#1-6constructor构造函数" class="headerlink" title="1.6constructor构造函数"></a>1.6constructor构造函数</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。</span><br><span class="line">constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。</span><br><span class="line">一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor  就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。</span><br></pre></td></tr></table></figure><p>如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数如:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">uname, age</span>) &#123;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">uname</span> = uname;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="comment">// 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数</span></span><br><span class="line"> <span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span> = &#123;</span><br><span class="line"> <span class="comment">// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数</span></span><br><span class="line">   <span class="attr">constructor</span>: <span class="title class_">Star</span>, <span class="comment">// 手动设置指回原来的构造函数</span></span><br><span class="line">   <span class="attr">sing</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会唱歌&#x27;</span>);</span><br><span class="line">   &#125;,</span><br><span class="line">   <span class="attr">movie</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会演电影&#x27;</span>);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> zxy = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&#x27;张学友&#x27;</span>, <span class="number">19</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(zxy)</span><br></pre></td></tr></table></figure><p>以上代码运行结果,设置constructor属性如图:</p><p><img src="/xujianhu/images/img8.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'>如果未设置constructor属性,如图:</p><p><img src="/xujianhu/images/img9.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="1-7原型链"><a href="#1-7原型链" class="headerlink" title="1.7原型链"></a>1.7原型链</h3><p>​	每一个实例对象又有一个__proto__属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性，这样一层一层往上找就形成了原型链。</p><p><img src="/xujianhu/images/img5.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="1-8构造函数实例和原型对象三角关系"><a href="#1-8构造函数实例和原型对象三角关系" class="headerlink" title="1.8构造函数实例和原型对象三角关系"></a>1.8构造函数实例和原型对象三角关系</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>构造函数的prototype属性指向了构造函数原型对象</span><br><span class="line"><span class="number">2.</span>实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象</span><br><span class="line"><span class="number">3.</span>构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数</span><br></pre></td></tr></table></figure><p><img src="/xujianhu/images/img4.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="1-9原型链和成员的查找机制"><a href="#1-9原型链和成员的查找机制" class="headerlink" title="1.9原型链和成员的查找机制"></a>1.9原型链和成员的查找机制</h3><p>任何对象都有原型对象,也就是prototype属性,任何原型对象也是一个对象,该对象就有__proto__属性,这样一层一层往上找,就形成了一条链,我们称此为原型链;</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。</span><br><span class="line">如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。</span><br><span class="line">如果还没有就查找原型对象的原型（Object的原型对象）。</span><br><span class="line">依此类推一直找到 Object 为止（null）。</span><br><span class="line">__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。</span><br></pre></td></tr></table></figure><h3 id="1-10原型对象中this指向"><a href="#1-10原型对象中this指向" class="headerlink" title="1.10原型对象中this指向"></a>1.10原型对象中this指向</h3><p>构造函数中的this和原型对象的this,都指向我们new出来的实例对象</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Star</span>(<span class="params">uname, age</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">uname</span> = uname;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> that;</span><br><span class="line"><span class="title class_">Star</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sing</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我会唱歌&#x27;</span>);</span><br><span class="line">    that = <span class="variable language_">this</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> ldh = <span class="keyword">new</span> <span class="title class_">Star</span>(<span class="string">&#x27;刘德华&#x27;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="comment">// 1. 在构造函数中,里面this指向的是对象实例 ldh</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(that === ldh);<span class="comment">//true</span></span><br><span class="line"><span class="comment">// 2.原型对象函数里面的this 指向的是 实例对象 ldh</span></span><br></pre></td></tr></table></figure><p><img src="/xujianhu/images/img6.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="1-11通过原型为数组扩展内置方法"><a href="#1-11通过原型为数组扩展内置方法" class="headerlink" title="1.11通过原型为数组扩展内置方法"></a>1.11通过原型为数组扩展内置方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">sum</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="variable language_">this</span>.<span class="property">length</span>; i++) &#123;</span><br><span class="line">  sum += <span class="variable language_">this</span>[i];</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> sum;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//此时数组对象中已经存在sum()方法了  可以始终 数组.sum()进行数据的求</span></span><br></pre></td></tr></table></figure><h2 id="2-继承"><a href="#2-继承" class="headerlink" title="2.继承"></a>2.继承</h2><h3 id="2-1call"><a href="#2-1call" class="headerlink" title="2.1call()"></a>2.1call()</h3><ul><li>call()可以调用函数</li><li>call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3..使用逗号隔开连接</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">x, y</span>) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(x + y);</span><br><span class="line">&#125;</span><br><span class="line">  <span class="keyword">var</span> o = &#123;</span><br><span class="line">  	<span class="attr">name</span>: <span class="string">&#x27;andy&#x27;</span></span><br><span class="line">  &#125;;</span><br><span class="line">  fn.<span class="title function_">call</span>(o, <span class="number">1</span>, <span class="number">2</span>);<span class="comment">//调用了函数此时的this指向了对象o,</span></span><br></pre></td></tr></table></figure><p><img src="/xujianhu/images/img10.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="2-2子构造函数继承父构造函数中的属性"><a href="#2-2子构造函数继承父构造函数中的属性" class="headerlink" title="2.2子构造函数继承父构造函数中的属性"></a>2.2子构造函数继承父构造函数中的属性</h3><ol><li>先定义一个父构造函数</li><li>再定义一个子构造函数</li><li>子构造函数继承父构造函数的属性(使用call方法)</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 1. 父构造函数</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">Father</span>(<span class="params">uname, age</span>) &#123;</span><br><span class="line">   <span class="comment">// this 指向父构造函数的对象实例</span></span><br><span class="line">   <span class="variable language_">this</span>.<span class="property">uname</span> = uname;</span><br><span class="line">   <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line"> &#125;</span><br><span class="line">  <span class="comment">// 2 .子构造函数 </span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Son</span>(<span class="params">uname, age, score</span>) &#123;</span><br><span class="line">  <span class="comment">// this 指向子构造函数的对象实例</span></span><br><span class="line">  <span class="number">3.</span>使用call方式实现子继承父的属性</span><br><span class="line">  <span class="title class_">Father</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>, uname, age);</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">score</span> = score;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> son = <span class="keyword">new</span> <span class="title class_">Son</span>(<span class="string">&#x27;刘德华&#x27;</span>, <span class="number">18</span>, <span class="number">100</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(son);</span><br></pre></td></tr></table></figure><p><img src="/xujianhu/images/img11.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="2-3借用原型对象继承方法"><a href="#2-3借用原型对象继承方法" class="headerlink" title="2.3借用原型对象继承方法"></a>2.3借用原型对象继承方法</h3><ol><li>先定义一个父构造函数</li><li>再定义一个子构造函数</li><li>子构造函数继承父构造函数的属性(使用call方法)</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 父构造函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Father</span>(<span class="params">uname, age</span>) &#123;</span><br><span class="line">  <span class="comment">// this 指向父构造函数的对象实例</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">uname</span> = uname;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Father</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">money</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">100000</span>);</span><br><span class="line"> &#125;;</span><br><span class="line"> <span class="comment">// 2 .子构造函数 </span></span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">Son</span>(<span class="params">uname, age, score</span>) &#123;</span><br><span class="line">      <span class="comment">// this 指向子构造函数的对象实例</span></span><br><span class="line">      <span class="title class_">Father</span>.<span class="title function_">call</span>(<span class="variable language_">this</span>, uname, age);</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">score</span> = score;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="comment">// Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化</span></span><br><span class="line">  <span class="title class_">Son</span>.<span class="property"><span class="keyword">prototype</span></span> = <span class="keyword">new</span> <span class="title class_">Father</span>();</span><br><span class="line">  <span class="comment">// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数</span></span><br><span class="line">  <span class="title class_">Son</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> = <span class="title class_">Son</span>;</span><br><span class="line">  <span class="comment">// 这个是子构造函数专门的方法</span></span><br><span class="line">  <span class="title class_">Son</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">exam</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;孩子要考试&#x27;</span>);</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> son = <span class="keyword">new</span> <span class="title class_">Son</span>(<span class="string">&#x27;刘德华&#x27;</span>, <span class="number">18</span>, <span class="number">100</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(son);</span><br></pre></td></tr></table></figure><p>如上代码结果如图:</p><p><img src="/xujianhu/images/img12.png" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="3-ES5新增方法"><a href="#3-ES5新增方法" class="headerlink" title="3.ES5新增方法"></a>3.ES5新增方法</h2><h3 id="3-1数组方法forEach遍历数组"><a href="#3-1数组方法forEach遍历数组" class="headerlink" title="3.1数组方法forEach遍历数组"></a>3.1数组方法forEach遍历数组</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">value, index, array</span>) &#123;</span><br><span class="line">      <span class="comment">//参数一是:数组元素</span></span><br><span class="line">      <span class="comment">//参数二是:数组元素的索引</span></span><br><span class="line">      <span class="comment">//参数三是:当前的数组</span></span><br><span class="line">&#125;)</span><br><span class="line"> <span class="comment">//相当于数组遍历的 for循环 没有返回值</span></span><br></pre></td></tr></table></figure><h3 id="3-2数组方法filter过滤数组"><a href="#3-2数组方法filter过滤数组" class="headerlink" title="3.2数组方法filter过滤数组"></a>3.2数组方法filter过滤数组</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">12</span>, <span class="number">66</span>, <span class="number">4</span>, <span class="number">88</span>, <span class="number">3</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">var</span> newArr = arr.<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">value, index,array</span>) &#123;</span><br><span class="line">	 <span class="comment">//参数一是:数组元素</span></span><br><span class="line">   <span class="comment">//参数二是:数组元素的索引</span></span><br><span class="line">   <span class="comment">//参数三是:当前的数组</span></span><br><span class="line">   <span class="keyword">return</span> value &gt;= <span class="number">20</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);<span class="comment">//[66,88] //返回值是一个新数组</span></span><br></pre></td></tr></table></figure><h3 id="3-3数组方法some"><a href="#3-3数组方法some" class="headerlink" title="3.3数组方法some"></a>3.3数组方法some</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">some 查找数组中是否有满足条件的元素 </span><br><span class="line"> <span class="keyword">var</span> arr = [<span class="number">10</span>, <span class="number">30</span>, <span class="number">4</span>];</span><br><span class="line"> <span class="keyword">var</span> flag = arr.<span class="title function_">some</span>(<span class="keyword">function</span>(<span class="params">value,index,array</span>) &#123;</span><br><span class="line">    <span class="comment">//参数一是:数组元素</span></span><br><span class="line">     <span class="comment">//参数二是:数组元素的索引</span></span><br><span class="line">     <span class="comment">//参数三是:当前的数组</span></span><br><span class="line">     <span class="keyword">return</span> value &lt; <span class="number">3</span>;</span><br><span class="line">  &#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(flag);<span class="comment">//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环</span></span><br></pre></td></tr></table></figure><h3 id="3-4筛选商品案例"><a href="#3-4筛选商品案例" class="headerlink" title="3.4筛选商品案例"></a>3.4筛选商品案例</h3><ol><li><p>定义数组对象数据</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> data = [&#123;</span><br><span class="line">            <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line">            <span class="attr">pname</span>: <span class="string">&#x27;小米&#x27;</span>,</span><br><span class="line">            <span class="attr">price</span>: <span class="number">3999</span></span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line">            <span class="attr">pname</span>: <span class="string">&#x27;oppo&#x27;</span>,</span><br><span class="line">            <span class="attr">price</span>: <span class="number">999</span></span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            <span class="attr">id</span>: <span class="number">3</span>,</span><br><span class="line">            <span class="attr">pname</span>: <span class="string">&#x27;荣耀&#x27;</span>,</span><br><span class="line">            <span class="attr">price</span>: <span class="number">1299</span></span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            <span class="attr">id</span>: <span class="number">4</span>,</span><br><span class="line">            <span class="attr">pname</span>: <span class="string">&#x27;华为&#x27;</span>,</span><br><span class="line">            <span class="attr">price</span>: <span class="number">1999</span></span><br><span class="line">        &#125;, ];</span><br></pre></td></tr></table></figure></li><li><p>使用forEach遍历数据并渲染到页面中</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">data.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">value</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> tr = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;tr&#x27;</span>);</span><br><span class="line">  tr.<span class="property">innerHTML</span> = <span class="string">&#x27;&lt;td&gt;&#x27;</span> + value.<span class="property">id</span> + <span class="string">&#x27;&lt;/td&gt;&lt;td&gt;&#x27;</span> + value.<span class="property">pname</span> + <span class="string">&#x27;&lt;/td&gt;&lt;td&gt;&#x27;</span> + value.<span class="property">price</span> + <span class="string">&#x27;&lt;/td&gt;&#x27;</span>;</span><br><span class="line">  tbody.<span class="title function_">appendChild</span>(tr);</span><br><span class="line"> &#125;);</span><br></pre></td></tr></table></figure></li><li><p>根据价格筛选数据</p><ol><li><p>获取到搜索按钮并为其绑定点击事件</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">search_price.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li><li><p>使用filter将用户输入的价格信息筛选出来</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">search_price.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> newDate = data.<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">value</span>) &#123;</span><br><span class="line">        <span class="comment">//start.value是开始区间</span></span><br><span class="line">        <span class="comment">//end.value是结束的区间</span></span><br><span class="line">      	<span class="keyword">return</span> value.<span class="property">price</span> &gt;= start.<span class="property">value</span> &amp;&amp; value.<span class="property">price</span> &lt;= end.<span class="property">value</span>;</span><br><span class="line">      &#125;);</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newDate);</span><br><span class="line"> &#125;);</span><br></pre></td></tr></table></figure></li><li><p>将筛选出来的数据重新渲染到表格中</p><ol><li><p>将渲染数据的逻辑封装到一个函数中</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">setDate</span>(<span class="params">mydata</span>) &#123;</span><br><span class="line">      <span class="comment">// 先清空原来tbody 里面的数据</span></span><br><span class="line">  tbody.<span class="property">innerHTML</span> = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  mydata.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">value</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> tr = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;tr&#x27;</span>);</span><br><span class="line">    tr.<span class="property">innerHTML</span> = <span class="string">&#x27;&lt;td&gt;&#x27;</span> + value.<span class="property">id</span> + <span class="string">&#x27;&lt;/td&gt;&lt;td&gt;&#x27;</span> + value.<span class="property">pname</span> + <span class="string">&#x27;&lt;/td&gt;&lt;td&gt;&#x27;</span> + value.<span class="property">price</span> + <span class="string">&#x27;&lt;/td&gt;&#x27;</span>;</span><br><span class="line">      tbody.<span class="title function_">appendChild</span>(tr);</span><br><span class="line">  &#125;);</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure></li><li><p>将筛选之后的数据重新渲染</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> search_price.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="keyword">var</span> newDate = data.<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">value</span>) &#123;</span><br><span class="line">     <span class="keyword">return</span> value.<span class="property">price</span> &gt;= start.<span class="property">value</span> &amp;&amp; value.<span class="property">price</span> &lt;= end.<span class="property">value</span>;</span><br><span class="line">     &#125;);</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(newDate);</span><br><span class="line">     <span class="comment">// 把筛选完之后的对象渲染到页面中</span></span><br><span class="line">     <span class="title function_">setDate</span>(newDate);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li></ol></li><li><p>根据商品名称筛选</p><ol><li><p>获取用户输入的商品名称</p></li><li><p>为查询按钮绑定点击事件,将输入的商品名称与这个数据进行筛选</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"> search_pro.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="keyword">var</span> arr = [];</span><br><span class="line">     data.<span class="title function_">some</span>(<span class="keyword">function</span>(<span class="params">value</span>) &#123;</span><br><span class="line">       <span class="keyword">if</span> (value.<span class="property">pname</span> === product.<span class="property">value</span>) &#123;</span><br><span class="line">         <span class="comment">// console.log(value);</span></span><br><span class="line">         arr.<span class="title function_">push</span>(value);</span><br><span class="line">         <span class="keyword">return</span> <span class="literal">true</span>; <span class="comment">// return 后面必须写true  </span></span><br><span class="line">       &#125;</span><br><span class="line">     &#125;);</span><br><span class="line">     <span class="comment">// 把拿到的数据渲染到页面中</span></span><br><span class="line">     <span class="title function_">setDate</span>(arr);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li></ol></li></ol></li></ol><h3 id="3-5some和forEach区别"><a href="#3-5some和forEach区别" class="headerlink" title="3.5some和forEach区别"></a>3.5some和forEach区别</h3><ul><li>如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高</li><li>在forEach 里面 return 不会终止迭代</li></ul><h3 id="3-6trim方法去除字符串两端的空格"><a href="#3-6trim方法去除字符串两端的空格" class="headerlink" title="3.6trim方法去除字符串两端的空格"></a>3.6trim方法去除字符串两端的空格</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;   hello   &#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">trim</span>()）  <span class="comment">//hello 去除两端空格</span></span><br><span class="line"><span class="keyword">var</span> str1 = <span class="string">&#x27;   he l l o   &#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">trim</span>()）  <span class="comment">//he l l o  去除两端空格</span></span><br></pre></td></tr></table></figure><h3 id="3-7获取对象的属性名"><a href="#3-7获取对象的属性名" class="headerlink" title="3.7获取对象的属性名"></a>3.7获取对象的属性名</h3><p>Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">var</span> obj = &#123;</span><br><span class="line">     <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line">     <span class="attr">pname</span>: <span class="string">&#x27;小米&#x27;</span>,</span><br><span class="line">     <span class="attr">price</span>: <span class="number">1999</span>,</span><br><span class="line">     <span class="attr">num</span>: <span class="number">2000</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> result = <span class="title class_">Object</span>.<span class="title function_">keys</span>(obj)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result)<span class="comment">//[id，pname,price,num]</span></span><br></pre></td></tr></table></figure><h3 id="3-8Object-defineProperty"><a href="#3-8Object-defineProperty" class="headerlink" title="3.8Object.defineProperty"></a>3.8Object.defineProperty</h3><p>Object.defineProperty设置或修改对象中的属性</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(对象，修改或新增的属性名，&#123;</span><br><span class="line">		<span class="attr">value</span>:修改或新增的属性的值,</span><br><span class="line">		<span class="attr">writable</span>:<span class="literal">true</span>/<span class="literal">false</span>,<span class="comment">//如果值为false 不允许修改这个属性值</span></span><br><span class="line">		<span class="attr">enumerable</span>: <span class="literal">false</span>,<span class="comment">//enumerable 如果值为false 则不允许遍历</span></span><br><span class="line">        <span class="attr">configurable</span>: <span class="literal">false</span>  <span class="comment">//configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性</span></span><br><span class="line">&#125;)	</span><br></pre></td></tr></table></figure></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章 <span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/node/vscode%E4%B8%AD%E5%B0%86.art%E6%96%87%E4%BB%B6%E8%AF%86%E5%88%AB%E4%B8%BAhtml%E6%96%87%E4%BB%B6%E7%9A%842%E7%A7%8D%E6%96%B9%E6%B3%95/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/node/">node</a></div><h5><a href="/xujianhu/node/vscode%E4%B8%AD%E5%B0%86.art%E6%96%87%E4%BB%B6%E8%AF%86%E5%88%AB%E4%B8%BAhtml%E6%96%87%E4%BB%B6%E7%9A%842%E7%A7%8D%E6%96%B9%E6%B3%95/" class="trm-anima-link">vscode中将.art文件识别为html文件的2种方法</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/10/09</li><li>00:03</li></ul></div></div></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/javascript/%E5%87%BD%E6%95%B0%E7%9A%84%E8%8A%82%E6%B5%81%E4%B8%8E%E9%98%B2%E6%8A%96/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/javascript/">javascript</a></div><h5><a href="/xujianhu/javascript/%E5%87%BD%E6%95%B0%E7%9A%84%E8%8A%82%E6%B5%81%E4%B8%8E%E9%98%B2%E6%8A%96/" class="trm-anima-link">函数的节流与防抖</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/10/08</li><li>23:55</li></ul></div></div></div></div><div class="trm-divider footer-divider"></div><footer class="trm-scroll-animation"><div class="trm-footer-item"><span>© 2023- 2023</span> <span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">不情的歌</span></div><div class="trm-footer-item">博客已萌萌哒运行 <span id="since" class="trm-accent-color"></span> 天</div><div class="trm-footer-item">当你累的时候你是在走上坡路</div></footer><script>function show_date_time(){var e=new Date("10/07/2023 15:00:00"),t=(new Date).getTime()-e.getTime(),i=Math.floor(t/864e5);since.innerHTML=i}show_date_time()</script></div></div></div></div></div><div id="post-toc" class="trm-post-toc"><div class="trm-post-toc-header">目录导航</div><div class="trm-post-toc-content"><ol class="trm-toc"><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#JavaScript高级第02天笔记"><span class="trm-toc-number">1.</span> <span class="trm-toc-text">JavaScript高级第02天笔记</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#1-构造函数和原型"><span class="trm-toc-number">1.1.</span> <span class="trm-toc-text">1.构造函数和原型</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-1对象的三种创建方式–复习"><span class="trm-toc-number">1.1.1.</span> <span class="trm-toc-text">1.1对象的三种创建方式–复习</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-2静态成员和实例成员"><span class="trm-toc-number">1.1.2.</span> <span class="trm-toc-text">1.2静态成员和实例成员</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-3构造函数的问题"><span class="trm-toc-number">1.1.3.</span> <span class="trm-toc-text">1.3构造函数的问题</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-4构造函数原型prototype"><span class="trm-toc-number">1.1.4.</span> <span class="trm-toc-text">1.4构造函数原型prototype</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-5对象原型"><span class="trm-toc-number">1.1.5.</span> <span class="trm-toc-text">1.5对象原型</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-6constructor构造函数"><span class="trm-toc-number">1.1.6.</span> <span class="trm-toc-text">1.6constructor构造函数</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-7原型链"><span class="trm-toc-number">1.1.7.</span> <span class="trm-toc-text">1.7原型链</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-8构造函数实例和原型对象三角关系"><span class="trm-toc-number">1.1.8.</span> <span class="trm-toc-text">1.8构造函数实例和原型对象三角关系</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-9原型链和成员的查找机制"><span class="trm-toc-number">1.1.9.</span> <span class="trm-toc-text">1.9原型链和成员的查找机制</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-10原型对象中this指向"><span class="trm-toc-number">1.1.10.</span> <span class="trm-toc-text">1.10原型对象中this指向</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-11通过原型为数组扩展内置方法"><span class="trm-toc-number">1.1.11.</span> <span class="trm-toc-text">1.11通过原型为数组扩展内置方法</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#2-继承"><span class="trm-toc-number">1.2.</span> <span class="trm-toc-text">2.继承</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#2-1call"><span class="trm-toc-number">1.2.1.</span> <span class="trm-toc-text">2.1call()</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#2-2子构造函数继承父构造函数中的属性"><span class="trm-toc-number">1.2.2.</span> <span class="trm-toc-text">2.2子构造函数继承父构造函数中的属性</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#2-3借用原型对象继承方法"><span class="trm-toc-number">1.2.3.</span> <span class="trm-toc-text">2.3借用原型对象继承方法</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#3-ES5新增方法"><span class="trm-toc-number">1.3.</span> <span class="trm-toc-text">3.ES5新增方法</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#3-1数组方法forEach遍历数组"><span class="trm-toc-number">1.3.1.</span> <span class="trm-toc-text">3.1数组方法forEach遍历数组</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#3-2数组方法filter过滤数组"><span class="trm-toc-number">1.3.2.</span> <span class="trm-toc-text">3.2数组方法filter过滤数组</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#3-3数组方法some"><span class="trm-toc-number">1.3.3.</span> <span class="trm-toc-text">3.3数组方法some</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#3-4筛选商品案例"><span class="trm-toc-number">1.3.4.</span> <span class="trm-toc-text">3.4筛选商品案例</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#3-5some和forEach区别"><span class="trm-toc-number">1.3.5.</span> <span class="trm-toc-text">3.5some和forEach区别</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#3-6trim方法去除字符串两端的空格"><span class="trm-toc-number">1.3.6.</span> <span class="trm-toc-text">3.6trim方法去除字符串两端的空格</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#3-7获取对象的属性名"><span class="trm-toc-number">1.3.7.</span> <span class="trm-toc-text">3.7获取对象的属性名</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#3-8Object-defineProperty"><span class="trm-toc-number">1.3.8.</span> <span class="trm-toc-text">3.8Object.defineProperty</span></a></li></ol></li></ol></li></ol></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn post-toc-btn" data-title="目录"><i class="iconfont fas fa-th-list"></i></div><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div class="trm-fixed-btn hidden-md" data-title="单栏和双栏切换" onclick="asyncFun.switchSingleColumn()"><i class="iconfont fas fa-arrows-alt-h"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><script src="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="/xujianhu/js/plugins/typing.js?v=2.1.2"></script><script id="async-script" src="/xujianhu/js/main.js?v=2.1.2"></script><script src="/xujianhu/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>